import React, { useState } from "react";
import { Form, Input, Button, message, Modal } from "antd";
import styles from "./index.module.scss";
import { post } from "../../api/request";
import { useNavigate } from "react-router-dom";
import SliderCaptcha from "./SliderCaptcha"; // 引入滑动验证组件
import "./SliderCaptcha.css"; // 引入滑动验证组件样式

/**
 * 登录表单字段接口
 */
interface LoginFormFields {
  username: string; // 用户名
  password: string; // 密码
}

/**
 * 登录页面组件
 * 包含用户名密码输入、滑动验证、登录功能
 */
const Login: React.FC = () => {
  const nav = useNavigate(); // 路由导航钩子
  const [form] = Form.useForm(); // Ant Design 表单实例
  const [captchaVerified, setCaptchaVerified] = useState(false); // 验证码验证状态
  const [isModalVisible, setIsModalVisible] = useState(false); // 验证模态框显示状态
  
  /**
   * 显示验证模态框
   * 当用户点击验证区域时调用
   */
  const showCaptchaModal = () => {
    setIsModalVisible(true);
  };
  
  /**
   * 处理验证码验证结果
   * @param success 验证是否成功
   */
  const handleCaptchaVerify = (success: boolean) => {
    if (success) {
      setCaptchaVerified(true); // 设置验证成功状态
      message.success("验证通过"); // 显示成功提示
    } else {
      setCaptchaVerified(false); // 设置验证失败状态
      message.error("验证失败，请重试"); // 显示失败提示
    }
    setIsModalVisible(false); // 关闭验证模态框
  };
  
  /**
   * 重置验证码状态
   * 当用户需要重新验证时调用
   */
  const resetCaptcha = () => {
    setCaptchaVerified(false);
  };
  
  /**
   * 登录表单提交处理
   * @param values 表单数据，包含用户名和密码
   */
  const onFinish = async (values: LoginFormFields) => {
    // 检查是否已完成验证
    if (!captchaVerified) {
      message.error("请先完成安全验证");
      return;
    }
    
    try {
      // 发送登录请求
      const res = await post("/login", values);
      console.log("登录响应:", res);
      
      // 检查登录是否成功
      if (res.data.code === 10000) {
        // 登录成功，保存用户信息到本地存储
        localStorage.setItem("userInfo", JSON.stringify(res.data.data.userInfo));
        localStorage.setItem("token", res.data.data.accessToken);
        localStorage.setItem('role', res.data.data.userInfo.role);
        
        // 跳转到首页
        nav("/");
        message.success(res.data.message);
      } else {
        // 登录失败，显示错误信息
        message.error(res.data.message);
        resetCaptcha(); // 重置验证码状态
      }
    } catch {
      // 网络请求失败
      message.error("登录请求失败，请重试");
      resetCaptcha(); // 重置验证码状态
    }
  };
  
  return (
    <div className={styles.box}>
      <div className={styles.row}>
        {/* 登录表单 */}
        <Form
          name="login"
          form={form}
          onFinish={onFinish}
          style={{
            minWidth: 270,
          }}
        >
          {/* 页面标题 */}
          <h1 style={{ textAlign: "center", marginBottom: 24, fontSize: "20px" }}>登录</h1>
          
          {/* 用户名输入框 */}
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input placeholder="用户名" />
          </Form.Item>
          
          {/* 密码输入框 */}
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password placeholder="密码" />
          </Form.Item>
          
          {/* 滑动验证区域 */}
          <Form.Item>
            <div className="captcha-container" style={{marginLeft:'160px'}}>
              {/* 验证状态显示区域 */}
              <div 
                className={`captcha-trigger ${captchaVerified ? 'verified' : ''}`}
                onClick={!captchaVerified ? showCaptchaModal : undefined}
              >
                {captchaVerified ? (
                  // 验证成功状态
                  <span className="captcha-status verified">
                    <span className="captcha-icon">✅</span>
                    已验证
                  </span>
                ) : (
                  // 未验证状态
                  <span className="captcha-status unverified">
                    <span className="captcha-icon">🔒</span>
                    点击进行验证
                  </span>
                )}
              </div>
              
              {/* 重新验证按钮 - 当前已隐藏 */}
              
            </div>
          </Form.Item>
          
          {/* 登录按钮 */}
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: "100%" }}
              disabled={!captchaVerified} // 未验证时禁用按钮
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
      
      {/* 滑动验证模态框 */}
      <Modal
        title="安全验证"
        visible={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        footer={null}
        width={360}
      >
        {/* 滑动验证组件 */}
        <SliderCaptcha onVerify={handleCaptchaVerify} />
      </Modal>
    </div>
  );
};

export default Login;